<template>
	<view>
		<!-- 搜索 -->
		<navigator url="../search/search">
			<button class="search">
				<image src="../../static/images/search.png" style="width: 30rpx;height: 30rpx;vertical-align: middle;">
				</image>搜索
			</button>
		</navigator>
		<!-- 商品文案--左边 -->
		<view class="kinds-left">
			<scroll-view scroll-y="true" :style="'height:'+heights+'px;'" :bindscrolltoupper="upper" :bindscroll="scroll"
				:scroll-top="scrollTop">
				<block class="scoll-text" v-for="(item,index) in leftshu" :key="index">
					<view class="scoll-con" @click="chang(index)" :class="kindsIndex==index?'active':''"
						bindtap="bindkinds">{{item}}</view>
				</block>
			</scroll-view>
		</view>
		<!-- 商品列表--右边 -->
		<view class="kinds-right">
			<scroll-view scroll-y="true" :style="'height:'+heights+'px;'" :scroll-top="scrollTop">
				<view v-for="(item,index) in kindslist" :key="index">
					<block style="float: left;width: 120px;height: 125px;">
						<image style="width: 120px;height: 125px;" :src="item.img"></image>
					</block>
					<view style="width: 120px;height: 125px;float: right;background-color: rgb(252, 247, 251);">
						<view style="width: 120px;height: 30px;line-height: 30rpx;margin-top: 20px;">{{item.txt}}</view>
						<view style="width: 120px;height: 30px;line-height: 30rpx;">已售{{item.shu}}件</view>
						<view style="width:120px;height: 30px;line-height: 30rpx;color: red;">￥{{item.money}}</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 商品文案--左边
				leftshu: ['热销', '集成灶', '蒸箱烤箱', '冰箱', '夏季换新', '生鲜食品', '美妆服饰', '家园家电', '新鲜水果', '品质家纺', '女装套装', '雪地靴', '电脑',
					'时令水果', '男装套装', '冬季套装', '新年礼物', '银质手镯', '翡翠手镯', '纯牛奶软糖', '水果糖', '风味牛肉干', '冬季套装', '儿童版牙刷', '公主裙',
					'古风套装', '液晶电视', '中央空调'
				],
				kindsIndex: 0,
				heights: 0,
				// 
				kindslist: [{
					img: '../../static/images/goods/1.jpg',
					txt: '御泥坊',
					shu: '0',
					money: '88'
				}, {
					img: '../../static/images/goods/2.jpg',
					txt: '护肤水',
					shu: '0',
					money: '88'
				}, {
					img: '../../static/images/goods/3.jpg',
					txt: '护肤水',
					shu: '0',
					money: '88'
				}, {
					img: '../../static/images/goods/4.jpg',
					txt: '护肤水',
					shu: '0',
					money: '88'
				}, {
					img: '../../static/images/goods/5.jpg',
					txt: '护肤水',
					shu: '0',
					money: '88'
				}, {
					img: '../../static/images/goods/6.jpg',
					txt: '护肤水',
					shu: '0',
					money: '88'
				}, {
					img: '../../static/images/goods/7.jpg',
					txt: '护肤水',
					shu: '0',
					money: '88'
				}, {
					img: '../../static/images/goods/8.jpg',
					txt: '护肤水',
					shu: '0',
					money: '88'
				}, {
					img: '../../static/images/goods/9.jpg',
					txt: '护肤水',
					shu: '0',
					money: '88'
				}, {
					img: '../../static/images/goods/10.jpg',
					txt: '护肤水',
					shu: '0',
					money: '88'
				}, {
					img: '../../static/images/goods/11.jpg',
					txt: '护肤水',
					shu: '0',
					money: '88'
				}, {
					img: '../../static/images/goods/12.jpg',
					txt: '护肤水',
					shu: '0',
					money: '88'
				}, {
					img: '../../static/images/goods/13.jpg',
					txt: '护肤水',
					shu: '0',
					money: '88'
				}, {
					img: '../../static/images/goods/14.jpg',
					txt: '护肤水',
					shu: '0',
					money: '88'
				}, {
					img: '../../static/images/goods/15.jpg',
					txt: '护肤水',
					shu: '0',
					money: '88'
				}, {
					img: '../../static/images/goods/16.jpg',
					txt: '护肤水',
					shu: '0',
					money: '88'
				}, {
					img: '../../static/images/goods/17.jpg',
					txt: '护肤水',
					shu: '0',
					money: '88'
				}, {
					img: '../../static/images/goods/18.jpg',
					txt: '护肤水',
					shu: '0',
					money: '88'
				}, {
					img: '../../static/images/goods/19.jpg',
					txt: '护肤水',
					shu: '0',
					money: '88'
				}, {
					img: '../../static/images/goods/20.jpg',
					txt: '护肤水',
					shu: '0',
					money: '88'
				}]
			}
		},
		onLoad() {
			// 获取系统信息
			let info = uni.getSystemInfoSync()
			// 从系统信息里面获取窗口的高度
			let WindowHeight = info.windowHeight
			console.log(WindowHeight)
			// 获取创建选择器
			let createSelect = uni.createSelectorQuery().in(this)
			// 使用创建选择器查询到需要的节点
			let search = createSelect.select('.search')
			// 获取当前节点信息
			search.boundingClientRect(Rect => {
				console.log(Rect)
				this.heights = WindowHeight - Rect.height//窗口的高度减去当前节点的高度
			}).exec();//.exec()暴露出去
		},
		methods: {
			chang(index) {
				this.kindsIndex = index
			}
		}
	}
</script>

<style scoped>
	/* 搜索 */
	.search {
		width: 96%;
		height: 30px;
		line-height: 30px;
		border: #C8C7CC 1px solid;
		margin: 5px auto;
		text-align: center;
	}

	.kinds-left {
		width: 30%;
		float: left;
		background-color: #c5d9c3;
	}

	/* 商品列表--右边 */
	.kinds-right {
		width: 65%;
		float: right;
		background-color: #C0C0C0;
	}

	.active {
		background-color: rgb(253, 250, 252);
	}
</style>
